<template>
  <div class="product-con">
    <div class="pro-body" v-for="(item,index) in productInfos" :key="item.id">
      <h1>{{index+ 1}}{{ item.name }}{{ item.price }}</h1>
      <button @click="item.count > 0 && changePCount({id:item.id,count:item.count-1})">-</button><input type="text" :value="item.count"/> <button @click="changePCount({id:item.id,count:item.count+1})">+</button>
      <br>
      <span>小计：{{ item.count*item.price }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('product', ['productInfos'])
  },
  methods: {
    ...mapMutations('product', ['changeCount']),
    ...mapActions('product', ['getList', 'changePCount']),
    changeCounts (id, num) {
      const p = {
        id,
        num
      }
      this.changeCount(p)
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style>
.pro-body{
  border: 1px solid purple;
}
</style>
